<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/my-css.css" />
    <script type="text/javascript" src="/js/my-js.js" ></script>
    <script type="text/javascript" src="/js/jquery.cookie.js" ></script>
    <script type="text/javascript" src="/js/vue.min.js" ></script>
    <title>Java学习网</title>
</head>
<body>
    <div id="header"></div>
    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
    <div class="container">
        <div class="row" id="app" v-cloak>
            <div class="col-xs-offset-1 col-xs-10">
                <ol class="breadcrumb" style="background-color: inherit; margin-bottom: 0;">
                    <li><a href="#">首页</a></li>
                    <li><a href="/courseCategorys">课程学习</a></li>
                    <li class="active" v-text="course.title"></li>
                </ol>
            </div>
            <div class="col-xs-offset-1 col-xs-10 panel panel-default">
                <h3><b v-text="course.title"></b></h3><hr />
                <p v-text="course.description"></p>
            </div>
            <div class="col-xs-offset-1 col-xs-10 panel panel-default">
                <h4><b>章节列表</b></h4><hr style="margin: 5px 0 10px 0;"/>
                <div v-for="(chapter, index) in chapters" class="panel panel-default">
                    <div class="panel-heading">
                        <b>章节{{index+1}}&emsp;&emsp;{{chapter.title}}</b>
                        <a v-on:click="jump(chapter.id)"
                          target="_blank" class="btn btn-xs btn-success pull-right">前往学习</a>
                    </div>
                    <div class="panel-body" v-text="chapter.description"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var course;
    myAjax({
    	type: 'get',
    	url: document.location.pathname,
    	async: false,
    	success: function(data) {course = data;}
    });
    var chapters;
    myAjax({
    	type: 'get',
        url: document.location.pathname + '/chapters',
        async: false,
        success: function(data) {
        	chapters = data;
        	for (var chapter in chapters) {
        		chapter.url = document.location.pathname + '/' + chapter.id;
        	}
       	}
    });
    new Vue({
    	el: "#app",
    	data: {
    		course: course,
    		chapters: chapters
    	}
    });
    function jump(id) {
    	window.open(document.location.href + '/chapters/' + id);
    }
</script>
</html>